<template>
  <div>
    <form action="/">
      <!-- 搜索 -->
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 搜索列表 -->
      <van-swipe-cell
        :name="item.id"
        v-for="item in searchList"
        :key="item.id"
        v-show="value.length !== 0"
      >
        <van-cell :border="false" :title="item.name" :value="item.ctime | dateFormat('商品上架时间：')" />
        <template slot="right">
          <van-button square type="danger" text="删除" @click.prevent="beforeClose(item.id)" />
          <!-- <button >删除</button> -->
        </template>
      </van-swipe-cell>

      <div v-show="searchList.length === 0" class="lishi">
        <div>
          <p>搜索历史</p>
          <van-icon @click="qingchu" name="clear" class="shanchu" />
        </div>
        <div>
          <!-- <van-tag @click="chuan" v-for="(historyStr, index) in historyList" :key="index + historyStr">{{ historyStr }}</van-tag> -->
          <span
            class="tabKuai"
            @click="chuan"
            v-for="(historyStr, index) in historyList"
            :key="index + historyStr"
          >{{ historyStr }}</span>
        </div>
        <div class="tishi" v-show="historyList.length == 0">暂无搜索历史</div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取商品列表的参数对象
      searchList: [
        // 假数据
        {
          id: '1',
          name: '测试1',
          ctime: '2018'
        },
        {
          id: '2',
          name: '测试2',
          ctime: '2019'
        }
      ],
      value: '',
      // 搜索历史
      historyList: []
    }
  },
  created() {},
  methods: {
    // 点击回车获取商品列表
    async onSearch() {
      // 判断输入框是否有内容
      // 如果不等于0就发送请求
      if (this.value !== '') {
        // console.log(1)
        const { data: res } = await this.$http.get('/api/getprodlist')
        if (res.status !== 0) {
          return this.$toast('获取搜索列表失败')
        }
        this.searchList = res.message
        let historyIndex = this.historyList.indexOf(this.value)
        if (historyIndex !== -1) {
          // 删除掉原有的数据
          this.historyList.splice(historyIndex, 1)
        }
        this.historyList.unshift(this.value)
        // console.log(this.searchList)
      } else {
        this.$dialog.alert({
          message: '请输入搜索内容'
        })
      }
    },
    // 取消按钮触发事件
    onCancel() {
      this.value = ''
      this.searchList = []
    },
    // 给搜索商品添加删除事件
    beforeClose(itemId) {
      this.searchList = this.searchList.filter(item => item.id !== itemId)
      // instance.close()
    },
    // 清除历史
    qingchu() {
      this.historyList = []
    },
    // 点击历史传到搜索框
    chuan(event) {
      // console.log(event)
      this.value = event.target.innerText
    }
  }
}
</script>

<style>
.van-cell {
  font-weight: 500 !important;
  font-size: 13px !important;
}
.lishi {
  /* display: flex; */
  position: relative;
  padding: 0 10px;
}
.shanchu {
  position: absolute !important;
  right: 10px;
  top: 2px;
}
.van-tag {
  margin: 0 5px;
}
.tishi {
  margin: 50px 0;
  text-align: center;
  font-size: 11px;
}
.tabKuai {
  height: 18px;

  width: 100%;
  font-size: 12px;
  background-color: #969799;
  padding: 2px 6px;
  margin: 5px 5px;
  color: #fff;
  border-radius: 4px;
}
</style>
